import { IThemeColor } from '../../../../../../type/index';

export const initGoodRate = (echarts: any, dom: HTMLElement, dataRate: number, themeColor: IThemeColor) => {
  const charts = echarts.init(dom);
  charts.setOption({
    title: [
      {
        text: '优秀率(80-100分)',
        textStyle: {
          color: themeColor.font,
          fontSize: 16,
          fontWeight: 'normal',
        },
        padding: [16, 0, 0, 16],
      },
      {
        text: `${(dataRate * 100).toFixed(0)}%`,
        x: 'center',
        top: '48%',
        textStyle: {
          fontSize: '30',
          color: themeColor.font,
          fontFamily: 'DINAlternate-Bold, DINAlternate',
          foontWeight: '600',
        },
      },
    ],
    angleAxis: {
      polarIndex: 0,
      min: 0,
      max: 100,
      show: false,
      // startAngle:90,
      clockwise: false, //逆时针
    },
    radiusAxis: {
      type: 'category',
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: {
      center: ['50%', '55%'], //中心点位置
      radius: '110%', //外圆环的大小
    },
    series: [
      {
        type: 'pie',
        color: ['#13d67d'],
        radius: ['58%', '60%'],
        center: ['50%', '55%'],
        data: [100],
        labelLine: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
      },
      {
        type: 'bar',
        z: 10,
        name: '外环',
        data: [dataRate * 100],
        coordinateSystem: 'polar',
        roundCap: true,
        barWidth: 25,
        itemStyle: {
          color: {
            // 完成的圆环的颜色
            colorStops: [
              {
                offset: 0,
                color: '#16a273', // 0% 处的颜色  深绿色
              },
              {
                offset: 1,
                color: '#8ddcac', // 100% 处的颜色  浅绿色
              },
            ],
          },
        },
      },
    ],
  });
};
